<template>
    <!-- 发现音乐Com -->
    <div class="DiscoverMusic">
        <ul>
            <li 
            @click="DiscoverMusicLiClick(item)" 
            v-for="(item,index) in DiscoverMusicUl" 
            :key="index"
            :class="DiscoverMusicLiClickFlag==item.label? 'liActive':''"
            >{{item.label}}</li>
        </ul>
        <div class="DiscoverMusicCom">
            <RecommendCom v-if="DiscoverMusicLiClickFlag=='个性推荐'" />
            <SongSheetCom v-if="DiscoverMusicLiClickFlag=='歌单'" />
        </div>
    </div>
</template>

<script>
// 个性推荐
import RecommendCom from "./components/RecommendCom/RecommendCom";
// 歌单
import SongSheetCom from "./components/SongSheetCom/SongSheetCom";

export default {
    data(){
        return{
            DiscoverMusicLiClickFlag:"个性推荐",
            DiscoverMusicUl:[
                {
                    label:"个性推荐",
                    value:"1"
                },
                {
                    label:"歌单",
                    value:"2"
                },
                {
                    label:"主播电台",
                    value:"3"
                },
                {
                    label:"排行榜",
                    value:"4"
                },
                {
                    label:"歌手",
                    value:"5"
                },
                {
                    label:"最新音乐",
                    value:"6"
                },
            ],
        }
    },
    components:{
        RecommendCom,
        SongSheetCom
    },
    methods:{
        DiscoverMusicLiClick(item){
            this.DiscoverMusicLiClickFlag = item.label;
        },
    }
}
</script>

<style lang="scss" scoped>
@import "./DiscoverMusic.scss";
</style>